<template>
    <div class="page" ref="modalRef">
        <div class="page-label">{{ label }}</div>
        <div class="page-rr">
            <div
                class="page-rr-title"
                v-for="(item, index) in data"
                :key="index"
                :class="{ active: activeTitle === item.code }"
                @click="onTitle(item.code)"
            >
                <span>{{ item.name }}</span>
                <i class="iconfont icon-down" />
            </div>
        </div>
        <div
            class="page-tags"
            :class="{ active: activeTitle === item.code }"
            v-for="(item, index) in data"
            :key="index"
        >
            <div
                class="page-tags-tag"
                :class="{
                    active:
                        !dataVals[item.code].value ||
                        !dataVals[item.code].value.length,
                }"
                @click="onSelectTagAll(item.code, item.multiple)"
            >
                全部
            </div>
            <div
                class="page-tags-tag"
                v-for="(_item, _index) in item.options"
                :key="_index"
                @click="
                    onSelectTag(
                        _item.value,
                        item.code,
                        _item.label,
                        item.multiple
                    )
                "
                :class="{
                    active:
                        dataVals[item.code].value &&
                        dataVals[item.code].value.includes(_item.value),
                }"
            >
                {{ _item.label }}
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, toRefs } from "vue";
import { onClickOutside } from "@vueuse/core";
import { multiply } from "lodash";

const props = defineProps({
    label: {
        type: String,
        default: () => "",
    },
    data: {
        type: Array,
        default: () => [],
    },
    dataVals: {
        type: Object,
        default: () => {},
    },
});

const emits = defineEmits(["select", "selectAll"]);

const { dataVals } = toRefs(props);

const modalRef = ref(null);
const activeTitle = ref("");
onClickOutside(modalRef, () => {
    activeTitle.value = "";
});

//点击标题
const onTitle = (val) => {
    if (activeTitle.value === val) activeTitle.value = "";
    else activeTitle.value = val;
};

const onSelectTag = (val, code, label, multiple) => {
    emits("select", val, code, label, multiple);
};

const onSelectTagAll = (code, multiple) => {
    emits("selectAll", code, multiple);
};
</script>
<style lang="less" scoped>
.page {
    display: flex;
    align-items: flex-start;
    position: relative;
    width: 100%;
    margin-bottom: 12px;
    &-label {
        width: 70px;
        min-width: 70px;
        max-width: 70px;
        text-align: right;
        color: var(--text-color-base-2);
        line-height: 28px;
        position: relative;
        margin-right: 20px;
        white-space: nowrap;
        text-overflow: ellipsis;
        &::after {
            content: "：";
            position: absolute;
            right: -16px;
            top: 50%;
            height: 24px;
            line-height: 24px;
            transform: translateY(-50%);
        }
    }
    &-rr {
        display: flex;
        align-items: center;
        &-title {
            padding: 0 12px;
            height: 28px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-right: 10px;
            transition: all 0.25s ease-in-out;
            box-sizing: border-box;
            border: 1px solid transparent;
            position: relative;
            &::after {
                content: "";
                position: absolute;
                bottom: -2px;
                left: 0;
                right: 0;
                height: 0;
                width: 100%;
                background: var(--bg-color-1);
                z-index: 103;
                transition: all 0.2s ease-in-out;
            }
            &.active {
                color: var(--primary-color);
                background: var(--bg-color-1);
                border-color: var(--border-color);
                border-bottom-color: var(--bg-color-1);
                border-top-left-radius: 2px;
                border-top-right-radius: 2px;
                svg {
                    transform: rotate(180deg);
                }
                i {
                    transform: rotate(180deg);
                }
                &::after {
                    height: 2px;
                }
            }
            svg {
                transition: all 0.25s ease-in-out;
                width: 13px;
                color: #777;
                margin-left: 6px;
            }
            i {
                transition: all 0.25s ease-in-out;
                color: #777;
                margin-left: 6px;
            }
            &:hover {
                color: var(--primary-color);
            }
        }
    }
    &-tags {
        position: absolute;
        top: 100%;
        left: 24px;
        right: 24px;
        border: 1px solid var(--border-color);
        transform: scaleY(0);
        background-color: var(--bg-color-1);
        padding: 12px 20px 12px;
        border: 1px solid var(--border-color);
        transition: all 0.25s ease-in-out;
        transform-origin: center top;
        border-radius: 2px;
        z-index: 100;
        &.active {
            transform: scaleY(1);
            z-index: 102;
        }
        display: flex;
        gap: 8px 12px;
        &-tag {
            line-height: 26px;
            height: 26px;
            padding: 0 10px;
            border-radius: 2px;
            cursor: pointer;
            color: var(--text-color-base);
            transition: all 0.2s ease-in-out;
            &:hover {
                background: var(--primary-color);
                color: #fff;
            }
            &.active {
                background: var(--primary-color);
                color: #fff;
            }
        }
    }
}
</style>
